<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交通事件处理平台 - 武汉大学</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 加载遮罩 -->
    <div class="loading-overlay">
        <div class="spinner-border text-primary loading-spinner" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <!-- 提示消息容器 -->
    <div class="toast-container" id="toast-container"></div>

    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <img src="https://www.whu.edu.cn/images/logo.png" alt="武汉大学" class="logo me-3">
                        <h1 class="mb-0">交通事件处理平台</h1>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <span id="current-time" class="fs-5"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 事件列表视图 -->
        <div id="event-list-view">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>交通事件</h2>
                <div>
                    <button class="btn btn-primary me-2" id="refresh-btn">
                        <i class="bi bi-arrow-clockwise"></i> 刷新
                    </button>
                    <div class="btn-group">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="filter-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            筛选
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="filter-dropdown">
                            <li><a class="dropdown-item" href="#" data-filter="all">全部事件</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" data-filter="high">高优先级</a></li>
                            <li><a class="dropdown-item" href="#" data-filter="medium">中优先级</a></li>
                            <li><a class="dropdown-item" href="#" data-filter="low">低优先级</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="events-container">
                <!-- 事件卡片将通过JavaScript动态加载 -->
            </div>
        </div>

        <!-- 事件详情视图 (初始隐藏) -->
        <div id="event-detail-view" style="display: none;">
            <button class="btn btn-outline-secondary mb-3" id="back-to-list">
                <i class="bi bi-arrow-left"></i> 返回列表
            </button>

            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0" id="event-title">事件详情</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="map-container">
                                <div id="map-container"></div>
                            </div>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th scope="row" style="width: 30%">事件ID</th>
                                        <td id="event-id">-</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">发生时间</th>
                                        <td id="event-time">-</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">位置</th>
                                        <td id="event-location">-</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">区域类型</th>
                                        <td id="event-area-type">-</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">事件类型</th>
                                        <td id="event-type">-</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">警报级别</th>
                                        <td id="event-alert-level">-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-3">事件指标</h5>
                            <div class="mb-4">
                                <label for="confidence-bar" class="form-label">可信度: <span id="confidence-value">0</span>%</label>
                                <div class="progress mb-3">
                                    <div id="confidence-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                                </div>

                                <label for="severity-bar" class="form-label">严重程度: <span id="severity-value">0</span>%</label>
                                <div class="progress mb-3">
                                    <div id="severity-bar" class="progress-bar bg-warning" role="progressbar" style="width: 0%"></div>
                                </div>

                                <label for="crowd-bar" class="form-label">人群密度: <span id="crowd-value">0</span>%</label>
                                <div class="progress mb-3">
                                    <div id="crowd-bar" class="progress-bar bg-danger" role="progressbar" style="width: 0%"></div>
                                </div>

                                <label for="impact-bar" class="form-label">交通影响: <span id="impact-value">0</span>%</label>
                                <div class="progress">
                                    <div id="impact-bar" class="progress-bar bg-info" role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>

                            <div class="alert" id="injury-alert" style="display: none;">
                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                <strong>注意：</strong>此事件涉及人员受伤，请优先处理！
                            </div>
                        </div>
                    </div>

                    <!-- 选项卡导航 -->
                    <ul class="nav nav-tabs" id="eventTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab">处理方案</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab">资源分配</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="visualization-tab" data-bs-toggle="tab" data-bs-target="#visualization" type="button" role="tab">AI可视化报告</button>
                        </li>
                    </ul>

                    <!-- 选项卡内容 -->
                    <div class="tab-content" id="eventTabsContent">
                        <div class="tab-pane fade show active" id="solution" role="tabpanel">
                            <h4 class="mb-3">推荐处理方案</h4>
                            <div id="processing-options">
                                <!-- 处理方案将通过JavaScript动态加载 -->
                            </div>
                        </div>

                        <div class="tab-pane fade" id="resources" role="tabpanel">
                            <h4 class="mb-3">资源分配</h4>
                            <div id="resource-allocation">
                                <!-- 资源分配信息将通过JavaScript动态加载 -->
                            </div>
                        </div>

                        <div class="tab-pane fade" id="visualization" role="tabpanel">
                            <h4 class="mb-3">AI可视化报告</h4>
                            <div class="visualization-container">
                                <div class="chart-container">
                                    <canvas id="impact-chart"></canvas>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h5>事件时间线</h5>
                                        <div class="impact-timeline" id="impact-timeline">
                                            <!-- 时间线内容将通过JavaScript动态加载 -->
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h5>预计影响</h5>
                                        <div class="card">
                                            <div class="card-body">
                                                <p><strong>交通影响指数:</strong> <span id="traffic-impact">0</span></p>
                                                <p><strong>预计影响时长:</strong> <span id="impact-duration">0</span> 分钟</p>
                                                <p><strong>影响范围半径:</strong> <span id="impact-radius">0</span> 公里</p>
                                                <div class="alert alert-warning mt-3">
                                                    <i class="bi bi-info-circle-fill me-2"></i>
                                                    <span id="impact-message">-</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-4">
                                            <h5>周边交通状况</h5>
                                            <div class="progress mb-2">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">畅通 25%</div>
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">缓慢 35%</div>
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">拥堵 40%</div>
                                            </div>
                                            <p class="text-muted small">基于周边5公里范围内实时交通数据</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 预加载高德地图API -->
    <link rel="preload" href="https://webapi.amap.com/maps?v=2.0&key=9c6dfda386428ae390377c92ee783249" as="script">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 高德地图JS API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=9c6dfda386428ae390377c92ee783249"></script>
    <script src="eventsDB.js"></script>
    <script src="app.js"></script>
</body>
</html>